<!DOCTYPE html>
<html>
<head>
    {include file="_Fragment/meta" /}
    <link rel="stylesheet" href="/static/pear/component/pear/css/pear.css" />
</head>
<body class="pear-container">
<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <div class="layui-form-item layui-inline">
                    <div class="layui-input-inline">
                        <select name="mediaType">
                            <option value="">书籍类型</option>
                            <option value="2">单课书籍</option>
                            <option value="3">多课书籍</option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item layui-inline">
                    <div class="layui-input-inline">
                        <select name="category">
                            <option value="" >选择分类</option>
                            {volist name="category" id="vo"}
                            <option value="{$vo.category}">{$vo.category}</option>
                            {/volist}
                        </select>
                    </div>
                </div>

                <div class="layui-form-item layui-inline">
                    <div class="layui-input-inline">
                        <input type="text" name="lecturer" placeholder="请输入主讲人" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item layui-inline">
                    <div class="layui-input-inline">
                        <input type="text" name="courseTitle" placeholder="请输入课程标题" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item layui-inline">
                    <div class="layui-input-inline">
                        <select name="using">
                            <option value="">课程状态</option>
                            <option value="2">隐藏</option>
                            <option value="1">显示</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item layui-inline">
                    <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="user-query">
                        <i class="layui-icon layui-icon-search"></i>
                        查询
                    </button>
                    <button type="reset" class="pear-btn pear-btn-md">
                        <i class="layui-icon layui-icon-refresh"></i>
                        重置
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
<div class="layui-card">
    <div class="layui-card-body">
        <table id="user-table" lay-filter="user-table"></table>
    </div>
</div>

<script type="text/html" id="user-toolbar">
    <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="synchronization">
        <i class="layui-icon layui-icon-refresh"></i>
        同步
    </button>
</script>

<script type="text/html" id="user-bar">
    <button class="pear-btn pear-btn-sm" id="more_{{d.id}}"><i class="layui-icon layui-icon-triangle-d"></i></button>
</script>
<script type="text/html" id="table-using">
    <input type="checkbox" name="using" value="{{d.id}}" lay-skin="switch" lay-text="是|否" lay-filter="table-using" data-json="{{ encodeURIComponent(JSON.stringify(d)) }}" {{ d.using == 2 ? 'checked' : '' }}>
</script>
<script type="text/html" id="table-media-type">
    {{#if (d.mediaType == '2') { }}
    <span>单课书籍</span>
    {{# }else if(d.mediaType == '3'){ }}
    <span>多课书籍</span>
    {{# } }}
</script>
<script type="text/html" id="user-image">
    <div class="user-info-head">
        <img src="{{d.courseCover}}" width="40px" height="80px" alt="">
    </div>
</script>
{include file="_Fragment/javascript" /}
<script>
    layui.use(['table', 'form', 'jquery','common', 'dropdown'], function() {
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;
        let common = layui.common;
        let dropdown = layui.dropdown;

        let cols = [
            [{
                    title: 'ID',
                    field: 'id',
                    align: 'center',
                },
                {
                    title: '书籍标题',
                    field: 'courseTitle',
                    align: 'center',
                },
                {
                    title: '状态',
                    field: 'using',
                    align: 'center',
                    templet:'#table-using',
                },
                {
                    title: '书籍封面',
                    field: 'courseCover',
                    align: 'center',
                    templet: '#user-image',
                },
                {
                    title: '书籍分类',
                    field: 'category',
                    align: 'center',
                },
                {
                    title: '讲师',
                    field: 'lecturerName',
                    align: 'center',
                },
                {
                    title: '作者',
                    field: 'author',
                    align: 'center',
                    width:'15%'
                },
                {
                    title: '音频时长(S)',
                    field: 'duration',
                    align: 'center',
                    width:'15%'
                },
                {
                    title: '书籍类型',
                    field: 'mediaType',
                    align: 'center',
                    templet:'#table-media-type',
                },
                {
                    title: '操作',
                    toolbar: '#user-bar',
                    align: 'center',
                    width:'10%'
                }
            ]
        ]

        table.render({
            elem: '#user-table',
            url: '/Book/load',
            page: {layout:['count', 'prev', 'page', 'next', 'skip']},
            limit: 10,
            cols: cols,
            //skin: 'line',
            toolbar: '#user-toolbar',
            defaultToolbar: [{
                title: '刷新',
                layEvent: 'refresh',
                icon: 'layui-icon-refresh',
            }, 'filter'],
            done: function(res, curr, count) {
                for (var i = 0; i < res.data.length; i++) {
                    dropdown.render({
                        elem: '#more_' + res.data[i].id,
                        data: [{
                            title: '查看',
                            id: res.data[i].id,
                            type: 1,
                        }, {
                            title: '学员',
                            id: res.data[i].id,
                            type: 2
                        }, {
                            title: '分享二维码',
                            id: res.data[i].id,
                            courseTitle: res.data[i].courseTitle,
                            type: 3
                        }],
                        id: '#more_' + res.data[i].id,
                        click: function(obj) {
                            if (obj.type == 1) {

                                layer.open({
                                    type: 2,
                                    title: '查看',
                                    shade: 0.1,
                                    area: [common.isModile()?'100%':'900px', common.isModile()?'100%':'600px'],
                                    content: '/Book/view?id='+obj.id
                                });

                            } else if (obj.type == 3) {
                                let loading = layer.load();
                                $.getJSON('/Book/getQrCode?id='+obj.id, function(json){
                                    layer.close(loading);
                                    layer.open({
                                        type: 1,
                                        title: '分享二维码',
                                        shade: 0.1,
                                        area: [common.isModile()?'100%':'280px', '400px'],
                                        content: '<img src="'+json.data.url+'" alt="">',
                                        btn:['下载'],
                                        yes: function(index, layero){
                                        //按钮【按钮一】的回调
                                            window.open('/Book/downloadQrCode?id='+obj.id+'&title='+obj.courseTitle, '_blank');
                                        }
                                    });
                                });

                            } else if(obj.type == 2) {
                                parent.layui.admin.addTab('book'+obj.id, obj.id+"学员", '/Book/members?id='+obj.id)
                            }
                        }
                    });
                }
            }
        });
        form.on('submit(user-query)', function(data) {
            table.reload('user-table', {
                where: data.field
                ,page: {
                    curr: 1, //重新从第 1 页开始
                    layout:['count', 'prev', 'page', 'next', 'skip']
                }
                ,limit: 10,
            })
            return false;
        });


        form.on('switch(table-using)', function(obj) {
            $.post("{:url('toggle')}", {id: this.value}, function (result) {
                if(result.status != 0) {
                    layer.tips(result.msg, obj.othis);
                }

            });
        });


        table.on('toolbar(user-table)', function(obj) {
            if (obj.event === 'synchronization') {
                window.synchronization();
            } else if (obj.event === 'refresh') {
                window.refresh();
            }
        });

        window.synchronization = function() {
            layer.confirm('确定要同步课程数据吗?', {
                icon: 3,
                title: '提示'
            }, function(index) {
                layer.close(index);
                let loading = layer.load();
                $.ajax({
                    url: "/Book/synchronization",
                    dataType: 'json',
                    type: 'post',
                    success: function(result) {
                        layer.close(loading);
                        if (result.status == 0) {
                            layer.msg('同步成功，本次新增：'+result.data.new+'门课程,同步：'+result.data.old+'门课程。', {
                                icon: 1,
                                time: 1000
                            }, function() {
                                table.reload('user-table');
                            });
                        } else {
                            layer.msg(result.msg, {
                                icon: 2,
                                time: 1000
                            });
                        }
                    }
                })
            });
        }

        window.refresh = function(param) {
            table.reload('user-table');
        }
    })
</script>
</body>
</html>
